<template>
  <v-header @add-item="addItem"></v-header>
  <div>正在进行</div>
  <List :list="list" :checked="false" @change-status="changeStatus" @del-item="delItem"></List>
  <div>已经完成</div>
  <List :list="list" :checked="true" @change-status="changeStatus" @del-item="delItem"></List>
</template>

<script>
import ListHooks from '@/hooks/ListHooks'
import List from './components/list'
import Header from '@/components/header'

export default {
  name: 'App',
  components: {
    List,
    'v-header': Header
  },
  setup () {
    const { list, addItem, changeStatus, delItem } = ListHooks()
    console.log(list)
    return {
      list,
      addItem,
      changeStatus,
      delItem
    }
  }
}
</script>

<style>
  body {
    background-color: #cccccc;
  }
</style>
